import {
  Button,
  Card,
  Divider,
  Form,
  Image,
  Input,
  message,
  Typography
} from 'antd'
import { LockOutlined, UserOutlined, RobotOutlined, ThunderboltOutlined, BulbOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import ring from '../assets/img/login.png'
import { adminInfoAPI, loginAPI } from '../service/auth'
import { setStorage, setToken } from '../utils/tools'

export default function Home() {
  const navigate = useNavigate()
  const doLogin = async (values) => {
    const res = await loginAPI(values)
    console.log(res)
    if (res.code === '0') {
      // 登录成功
      setToken(res.data.jwt)
      // 获取管理员信息
      const info = await adminInfoAPI()
      console.log(info)
      // 存储管理员角色 0-平台  1-商家
      setStorage('accountType', info.data.accountType)
      // 存储管理员名称
      setStorage('nickname', info.data.nickname)
      // 保存用户id
      setStorage('userId', info.data.id)
      message.success('登录成功')
      navigate('/admin')
    } else {
      message.error('登录失败')
    }
  }

  return (
    <div className="page" style={{ 
      paddingTop: 250,
      background: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 20%, #16213e 40%, #0f3460 60%, #533483 80%, #667eea 90%, #764ba2 100%)',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* 科技感背景装饰 */}
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: `
          radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.4) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.4) 0%, transparent 50%),
          radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%),
          radial-gradient(circle at 60% 60%, rgba(102, 126, 234, 0.3) 0%, transparent 50%)
        `,
        pointerEvents: 'none'
      }} />
      
      {/* 动态网格背景 */}
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundImage: `
          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)
        `,
        backgroundSize: '50px 50px',
        pointerEvents: 'none'
      }} />

      {/* 科技感发光线条 */}
      <div style={{
        position: 'absolute',
        top: '10%',
        left: '5%',
        width: '200px',
        height: '2px',
        background: 'linear-gradient(90deg, transparent, #667eea, transparent)',
        animation: 'scan 3s ease-in-out infinite',
        boxShadow: '0 0 20px rgba(102, 126, 234, 0.8)'
      }} />
      
      <div style={{
        position: 'absolute',
        top: '80%',
        right: '10%',
        width: '150px',
        height: '2px',
        background: 'linear-gradient(90deg, transparent, #764ba2, transparent)',
        animation: 'scan 4s ease-in-out infinite reverse',
        boxShadow: '0 0 20px rgba(118, 75, 162, 0.8)'
      }} />

      {/* 科技感数据流 */}
      <div style={{
        position: 'absolute',
        top: '20%',
        right: '15%',
        fontSize: '12px',
        color: 'rgba(102, 126, 234, 0.6)',
        fontFamily: 'monospace',
        animation: 'dataFlow 2s linear infinite',
        pointerEvents: 'none'
      }}>
        <div>01 02 03 04 05</div>
        <div>06 07 08 09 10</div>
        <div>11 12 13 14 15</div>
      </div>

      {/* AI智慧元素装饰 */}
      <div style={{
        position: 'absolute',
        top: '20%',
        right: '10%',
        fontSize: '60px',
        color: 'rgba(255, 255, 255, 0.1)',
        animation: 'float 3s ease-in-out infinite',
        filter: 'drop-shadow(0 0 10px rgba(102, 126, 234, 0.5))'
      }}>
        <RobotOutlined />
      </div>
      
      <div style={{
        position: 'absolute',
        top: '60%',
        left: '5%',
        fontSize: '40px',
        color: 'rgba(255, 255, 255, 0.1)',
        animation: 'float 4s ease-in-out infinite reverse',
        filter: 'drop-shadow(0 0 10px rgba(118, 75, 162, 0.5))'
      }}>
        <BulbOutlined />
      </div>

      <div style={{
        position: 'absolute',
        top: '30%',
        left: '15%',
        fontSize: '50px',
        color: 'rgba(255, 255, 255, 0.1)',
        animation: 'float 5s ease-in-out infinite',
        filter: 'drop-shadow(0 0 10px rgba(120, 219, 255, 0.5))'
      }}>
        <ThunderboltOutlined />
      </div>

      {/* 科技感圆环 */}
      <div style={{
        position: 'absolute',
        top: '15%',
        left: '20%',
        width: '100px',
        height: '100px',
        border: '2px solid rgba(102, 126, 234, 0.3)',
        borderRadius: '50%',
        animation: 'rotate 10s linear infinite',
        pointerEvents: 'none'
      }} />
      
      <div style={{
        position: 'absolute',
        top: '70%',
        right: '20%',
        width: '80px',
        height: '80px',
        border: '2px solid rgba(118, 75, 162, 0.3)',
        borderRadius: '50%',
        animation: 'rotate 8s linear infinite reverse',
        pointerEvents: 'none'
      }} />

      <div className="login-logo" style={{
        filter: 'drop-shadow(0 0 10px rgba(255, 255, 255, 0.3))'
      }}>
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng144deb7c253bae15f4cee1b871a72070b2fc6159c42d8b46ec3a35a918c033c5"
        />
        <img
          class="image_3"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngea8eefd7d91f66de0cc290db2ab59637927cb606305fe9ba885befdb664ead7a"
        />
        <span class="text_8" style={{
          background: 'linear-gradient(45deg, #fff, #e0e0e0, #fff)',
          backgroundClip: 'text',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          textShadow: '0 0 20px rgba(255, 255, 255, 0.5)'
        }}>LBS智慧营销管理系统</span>
      </div>
      
      {/* 卡片 */}
      <Card
        style={{
          width: 600,
          margin: '0 auto',
          background: 'rgba(255, 255, 255, 0.1)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.2)',
          borderRadius: '20px',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1)',
          position: 'relative',
          overflow: 'hidden'
        }}
        bodyStyle={{
          padding: '30px'
        }}
      >
        {/* 卡片科技装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '2px',
          background: 'linear-gradient(90deg, transparent, #667eea, #764ba2, transparent)',
          animation: 'scan 2s ease-in-out infinite'
        }} />
        
        <div style={{
          position: 'absolute',
          top: '50%',
          left: '-2px',
          width: '4px',
          height: '60px',
          background: 'linear-gradient(180deg, transparent, #667eea, transparent)',
          borderRadius: '2px',
          boxShadow: '0 0 10px rgba(102, 126, 234, 0.8)'
        }} />

        <div style={{ display: 'flex' }}>
          {/* 左侧：图片 */}
          <Image 
            width={200} 
            src={ring} 
            preview={false}
            style={{
              borderRadius: '15px',
              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)'
            }}
          />
          {/* 中间：分割线 */}
          <Divider 
            type="vertical" 
            style={{ 
              height: 220,
              borderColor: 'rgba(255, 255, 255, 0.3)',
              margin: '0 20px'
            }} 
          />
          {/* 右侧：表单 */}
          <Form
            onFinish={doLogin}
            style={{ flex: 1, paddingLeft: 15, paddingTop: 15 }}
            wrapperCol={{
              span: 24
            }}
          >
            {/* 表单项 */}
            <Form.Item>
              <div style={{ textAlign: 'center', marginBottom: '20px' }}>
                <Typography.Title 
                  level={4} 
                  style={{ 
                    color: '#fff',
                    textShadow: '0 0 10px rgba(255, 255, 255, 0.5)',
                    marginBottom: '10px'
                  }}
                >
                  欢迎登录LBS管理系统
                </Typography.Title>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: '8px',
                  color: 'rgba(255, 255, 255, 0.8)',
                  fontSize: '14px'
                }}>
                  <RobotOutlined style={{ color: '#667eea' }} />
                  <span>AI智能助手为您服务</span>
                </div>
              </div>
            </Form.Item>
            <Form.Item
              name="phone"
              rules={[{ required: true, message: '用户名不能为空' }]}
              initialValue="19941253145"
            >
              <Input
                placeholder="请输入管理员用户名"
                prefix={<UserOutlined style={{ color: 'rgba(255, 255, 255, 0.7)' }} />}
                style={{
                  background: 'rgba(255, 255, 255, 0.1)',
                  border: '1px solid rgba(255, 255, 255, 0.3)',
                  borderRadius: '10px',
                  color: '#fff',
                  height: '45px'
                }}
                className="tech-input"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '密码不能为空' }]}
              initialValue="123456"
            >
              <Input.Password
                placeholder="请输入密码"
                prefix={<LockOutlined style={{ color: 'rgba(255, 255, 255, 0.7)' }} />}
                style={{
                  background: 'rgba(255, 255, 255, 0.1)',
                  border: '1px solid rgba(255, 255, 255, 0.3)',
                  borderRadius: '10px',
                  color: '#fff',
                  height: '45px'
                }}
                className="tech-input"
              />
            </Form.Item>

            <Form.Item>
              <Button 
                type="primary" 
                block 
                htmlType="submit"
                style={{
                  background: 'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
                  border: 'none',
                  borderRadius: '10px',
                  height: '45px',
                  fontSize: '16px',
                  fontWeight: 'bold',
                  boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
                  transition: 'all 0.3s ease'
                }}
                className="tech-button"
              >
                <RobotOutlined style={{ marginRight: '8px' }} />
                智能登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Card>
    </div>
  )
}
